<template>

    <div id="address">
        <header-bar :head-title="headTitle" goBack="true" addNew="true"></header-bar>
        <div class="address-list">
            <div class="item">
                <div class="add-info">
                    <div class="add-info-man">
                        <span>张山</span>
                        <span>15067888898</span>
                    </div>
                    <p>330787878945684587</p>
                    <p>广东省广州市越秀区聚咯大家用了</p>
                </div>
                <div class="add-bot clear">
                    <div class="left">
                        <label><input type="radio" name="add" checked="true" />默认地址</label>
                    </div>
                    <div class="right">
                        <router-link :to="{name: 'addressEdit', query: {addressId: 1}}" class="mr">
                            <i class="icon iconfont icon-survey"></i>编辑</router-link>
                        <span @click="deleteOrder (id)">
                            <i class="icon iconfont icon-delete"></i>删除</span>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="add-info">
                    <div class="add-info-man">
                        <span>张山</span>
                        <span>15067888898</span>
                    </div>
                    <p>330787878945684587</p>
                    <p>广东省广州市越秀区聚咯大家用了</p>
                </div>
                <div class="add-bot clear">
                    <div class="left">
                        <label><input type="radio" name="add" />默认地址</label>
                    </div>
                    <div class="right">
                        <router-link :to="{name: '/addressEdit', query: {addressId: 2}}" class="mr">
                            <i class="icon iconfont icon-survey"></i>编辑</router-link>
                        <span @click="deleteOrder (id)">
                            <i class="icon iconfont icon-delete"></i>删除</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import HeaderBar from '@/components/HeaderBar.vue'
import { MessageBox, Toast } from 'mint-ui'
export default {
  components: {
    HeaderBar
  },
  data () {
    return {
      headTitle: '收货地址'
    }
  },
  methods: {
    deleteOrder (id) {
      MessageBox.confirm('确定要删除该收货地址吗?').then(action => {
        Toast({
          message: '删除成功',
          iconClass: 'mintui mintui-success'
        });
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.address-list{
    margin-top:.6rem;
    .item{
        margin: 0 .6rem .4rem;
        background: #fff;
        border-radius: .2rem;
        .add-info{
            padding: .6rem;
            .add-info-man{
                font-size: .7rem;
                margin-bottom: .2rem;
                span{margin-right: .4rem;}
            }
            p{line-height: .8rem; margin-bottom:.1rem; color: #999; font-size: .6rem;}
        }
        .add-bot{
            padding: .4rem .6rem;
            line-height: .8rem;
            font-size: .6rem;
            border-top:1px solid #eee;
            .mr{
                margin-right: .4rem;
            }
            i{
                font-size: .7rem;
                margin-right: .2rem;
            }
        }
    }
}

</style>

